// 导入基础库
import { connect, history } from 'umi';
// 导入配置参数
// 导入处理函数
// 导入UI组件
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Card, Space,Modal } from 'antd';
import ProForm, {
  ModalForm,
  ProFormText,
  ProFormSwitch,
  ProFormRadio,
} from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';
const { confirm } = Modal;
// 导入LESS样式
// import style from './index.less'

const PageView = (props) => {
  // 初始化参数------------------------------------------------
  const { ui, table: tb, socketio: io, dispatch: dp } = props;

  // 渲染UI组件------------------------------------------------
  return (
    <PageContainer
      extra={[
        <Button key="4" onClick={() => history.goBack()}>
          返回上一页
        </Button>,
        <ModalForm
          key="5"
          width={380}
          title="添加操作人员"
          trigger={
            <Button type="primary">
              <PlusOutlined />
              添加操作人员
            </Button>
          }
          onFinish={(values) => {
            console.log(values);
            dp({
              type: 'socketio/emit',
              payload: { type: 'add_user', data: values },
            });
            dp({ type: 'socketio/emit', payload: { type: 'get_user' } });
            return true;
          }}
          initialValues={{
            user: 'admin',
            password: '123456',
            state: true,
            auth: 'user',
          }}
        >
          <ProForm.Group>
            <ProFormText
              width="md"
              name="user"
              label="账号"
              tooltip="最长为 24 位"
              placeholder="请输入账号"
              rules={[{ required: true, message: '请输入账号!' }]}
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormText
              width="md"
              name="password"
              label="密码"
              placeholder="请输入密码"
              rules={[
                { required: true, message: '请输入密码!' },
                { pattern: /^.{6,20}$/, message: '请输入6位数以上的密码!' },
              ]}
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormSwitch name="state" label="状态" />
            <ProFormRadio.Group
              name="auth"
              label="权限"
              options={[
                {
                  label: '管理员',
                  value: 'admin',
                },
                {
                  label: '操作人员',
                  value: 'user',
                },
              ]}
            />
          </ProForm.Group>
        </ModalForm>,
      ]}
    >
      <Space size={[8, 16]} wrap>
        {io.user_list.map((item, id) => (
          <Card
            key={id}
            title={item.auth === 'admin' ? '管理员' : '操作人员'}
            extra={
              <Space size={20}>
                <ModalForm
                  key="5"
                  width={380}
                  title="编辑操作人员"
                  trigger={
                    <a>编辑</a>
                  }
                  onFinish={(values) => {
                    values._id = item._id
                    dp({
                      type: 'socketio/emit',
                      payload: { type: 'edit_user', data: values },
                    });
                    dp({ type: 'socketio/emit', payload: { type: 'get_user' } });
                    return true;
                  }}
                  initialValues={{
                    user: item.user,
                    password: item.password,
                    state: item.state,
                    auth: item.user,
                  }}
                >
                  <ProForm.Group>
                    <ProFormText
                      width="md"
                      name="user"
                      label="账号"
                      readonly
                      tooltip="最长为 24 位"
                      placeholder="请输入账号"
                      rules={[{ required: true, message: '请输入账号!' }]}
                    />
                  </ProForm.Group>
                  <ProForm.Group>
                    <ProFormText
                      width="md"
                      name="password"
                      label="密码"
                      placeholder="请输入密码"
                      rules={[
                        { required: true, message: '请输入密码!' },
                        { pattern: /^.{6,20}$/, message: '请输入6位数以上的密码!' },
                      ]}
                    />
                  </ProForm.Group>
                  <ProForm.Group>
                    <ProFormSwitch name="state" label="状态" />
                    <ProFormRadio.Group
                      name="auth"
                      label="权限"
                      options={[
                        {
                          label: '管理员',
                          value: 'admin',
                        },
                        {
                          label: '操作人员',
                          value: 'user',
                        },
                      ]}
                    />
                  </ProForm.Group>
                </ModalForm>
                <a key={2}
                  style={{ display: item.user === 'admin' ? 'none' : '' }}
                  onClick={() => {
                    confirm({
                      title: '询问?',
                      content: '是否要删除该账号?',
                      okText: '是的',
                      okType: 'danger',
                      cancelText: '取消',
                      onOk() {
                        dp({ type: 'socketio/emit', payload: { type: 'delete_user', data: item } })
                    dp({ type: 'socketio/emit', payload: { type: 'get_user' } });
                      },
                    
                    });                    
                  }}>删除</a>
                  
              </Space>
            }
            style={{ width: 250 }}
          >
            <p>账号：{item.user}</p>
            <p>密码：{item.password}</p>
            <p>状态：{item.state ? '正常' : '禁用'}</p>
          </Card>
        ))}
      </Space>
    </PageContainer>
  );
};

export default connect(({ ui, table, socketio }) => ({ ui, table, socketio }))(
  PageView,
);
